<template>
  <div class="homePageCard ResourceTable">
    <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
      <div class="titleName">各单位可调配资源表</div>
      <a>更多<i class="el-icon-d-arrow-right" color="#fff"></i></a>
    </div>
    <div class="resourceBar" style="height:30%">
      <div id="TeamBar" style="width:100%;height:100%">
        <!-- <Pie3dCharts :optionData="optionData[0]" :totalData="{ text: '', num: 0 }" charId="yjtzdcharId1" :pieOptions="{ innerSize: 110, subtitleY: 70, depth: 40 }" v-if="isShowcharts1"></Pie3dCharts> -->
        <div class="legend_pie">
          <div style="margin-left:5px;display: flex;align-items: center;width: 36%;" v-for="(item, i) of this.dataS" :key="i">
            <span class="pie_bottom" :style="{ background: allColors[i] }"></span>
            <span>{{item.name}}</span>
          </div>
        </div>
      </div>
      <div id="CarBar" style="width:100%;height:100%">
        <!-- <Pie3dCharts :optionData="optionData[1]" :totalData="{ text: '', num: 0 }" charId="zysycharId1" :pieOptions="{ innerSize: 110, subtitleY: 70, depth: 40 }" v-if="isShowcharts1"></Pie3dCharts> -->
        <div class="legend_pie">
          <div style="margin-left:5px;display: flex;align-items: center;width: 36%;" v-for="(item, i) of this.dataS1" :key="i">
            <span class="pie_bottom" :style="{ background: allColors[i] }"></span>
            <span>{{item.name}}</span>
          </div>
        </div>
      </div>
      <div id="EquipBar" style="width:100%;height:100%">
        <!-- <Pie3dCharts :optionData="optionData[2]" :totalData="{ text: '', num: 0 }" charId="zysycharId21" :pieOptions="{ innerSize: 110, subtitleY: 70, depth: 40 }" v-if="isShowcharts1"></Pie3dCharts> -->
        <div class="legend_pie">
          <div style="margin-left:5px;display: flex;align-items: center;width: 36%;" v-for="(item, i) of this.dataS2" :key="i">
            <span class="pie_bottom" :style="{ background: allColors[i] }"></span>
            <span>{{item.name}}</span>
          </div>
        </div>
      </div>
      <div id="SuppliesBar" style="width:100%;height:100%">
        <!-- <Pie3dCharts :optionData="optionData[3]" :totalData="{ text: '', num: 0 }" charId="zysycharId31" :pieOptions="{ innerSize: 110, subtitleY: 70, depth: 40 }" v-if="isShowcharts1"></Pie3dCharts> -->
        <div class="legend_pie">
          <div style="margin-left:5px;display: flex;align-items: center;width: 36%;" v-for="(item, i) of this.dataS3" :key="i">
            <span class="pie_bottom" :style="{ background: allColors[i] }"></span>
            <span>{{item.name}}</span>
          </div>
        </div>
      </div>
    </div>
    <el-table :header-cell-style="tableHeaderColor" ref="multipleTable" :row-class-name="tableRowClassName" show-summary :data="tableDatas" height="600px" max-height="610px" tooltip-effect="dark" style="width: 100%" size="small">
      <el-table-column prop="unit" label="所属单位" align="center">
        <el-table-column prop="unit" align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="队伍" align="center">
        <el-table-column prop="dwjg" label="基干" align="center">
        </el-table-column>
        <el-table-column prop="dwsd" label="输电" align="center">
        </el-table-column>
        <el-table-column prop="dwbd" label="变电" align="center">
        </el-table-column>
        <el-table-column prop="dwpd" label="配电" align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="车辆" align="center">
        <el-table-column prop="clddzyy" label="带电作业车" align="center">
        </el-table-column>
        <el-table-column prop="cldyc" label="电源车" align="center">
        </el-table-column>
        <el-table-column prop="cldqxc" label="抢修车" align="center">
        </el-table-column>
        <el-table-column prop="clddc" label="吊车" align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="装备" align="center">
        <el-table-column prop="zbfgd" label="泛光灯" align="center">
        </el-table-column>
        <el-table-column prop="zbtzd" label="探照灯" align="center">
        </el-table-column>
        <el-table-column prop="zbfdj" label="发电机" align="center">
        </el-table-column>
        <el-table-column prop="zbfdc" label="发电车" align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="物资" align="center">
        <el-table-column prop="wzkg" label="开关" align="center" width="70">
        </el-table-column>
        <el-table-column prop="wzdx" label="导线" align="center" width="70">
        </el-table-column>
        <el-table-column prop="wzdg" label="电杆" align="center" width="70">
        </el-table-column>
        <el-table-column prop="wzpb" label="配变" align="center" width="70">
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getReserveTopPie, allocationHome } from "@/api/EmergencyDisposal/zydp.js";
// import Pie3dCharts from "@/components/highCharts/HighChartsPie3d";
export default {
  name: "ResourceTable",
  // components: { Pie3dCharts },
  data() {
    return {
      optionData: [],
      allColors: ["#4FD2FD", "#FFBC4B", "#5EE855", "#EEEA71", "#a1ff8f", "#E1C48B", "#6197E8", "#8BC2E1", "#6FF093"],
      isShowcharts1: false,
      // tableDatas: [
      //   {
      //     unit: "省公司",
      //     jg: "25",
      //     sd: "22",
      //     bd: "39",
      //     pd: "56",
      //     ddzyc: "11",
      //     dyc: "46",
      //     qxc: "34",
      //     dc: "62",
      //     fgd: "23",
      //     tzd: "52",
      //     fdj: "46",
      //     fdc: "88",
      //     kg: "64",
      //     dx: "26",
      //     dg: "125",
      //     pb: "124"
      //   },
      //   {
      //     unit: "武汉",
      //     jg: "36",
      //     sd: "37",
      //     bd: "46",
      //     pd: "66",
      //     ddzyc: "21",
      //     dyc: "24",
      //     qxc: "65",
      //     dc: "26",
      //     fgd: "85",
      //     tzd: "76",
      //     fdj: "58",
      //     fdc: "31",
      //     kg: "178",
      //     dx: "178",
      //     dg: "278",
      //     pb: "85"
      //   },
      //   {
      //     unit: "荆州",
      //     jg: "21",
      //     sd: "25",
      //     bd: "36",
      //     pd: "68",
      //     ddzyc: "26",
      //     dyc: "22",
      //     qxc: "58",
      //     dc: "17",
      //     fgd: "68",
      //     tzd: "76",
      //     fdj: "36",
      //     fdc: "26",
      //     kg: "134",
      //     dx: "165",
      //     dg: "198",
      //     pb: "83"
      //   },
      //   {
      //     unit: "黄石",
      //     jg: "28",
      //     sd: "29",
      //     bd: "36",
      //     pd: "58",
      //     ddzyc: "21",
      //     dyc: "23",
      //     qxc: "62",
      //     dc: "24",
      //     fgd: "79",
      //     tzd: "79",
      //     fdj: "52",
      //     fdc: "31",
      //     kg: "178",
      //     dx: "136",
      //     dg: "236",
      //     pb: "79"
      //   },
      //   {
      //     unit: "宜昌",
      //     jg: "26",
      //     sd: "31",
      //     bd: "42",
      //     pd: "68",
      //     ddzyc: "22",
      //     dyc: "25",
      //     qxc: "63",
      //     dc: "19",
      //     fgd: "76",
      //     tzd: "81",
      //     fdj: "46",
      //     fdc: "22",
      //     kg: "145",
      //     dx: "128",
      //     dg: "228",
      //     pb: "76"
      //   },
      //   {
      //     unit: "襄阳",
      //     jg: "27",
      //     sd: "31",
      //     bd: "25",
      //     pd: "69",
      //     ddzyc: "24",
      //     dyc: "22",
      //     qxc: "51",
      //     dc: "16",
      //     fgd: "81",
      //     tzd: "67",
      //     fdj: "42",
      //     fdc: "24",
      //     kg: "136",
      //     dx: "134",
      //     dg: "236",
      //     pb: "81"
      //   },
      //   {
      //     unit: "孝感",
      //     jg: "29",
      //     sd: "36",
      //     bd: "41",
      //     pd: "65",
      //     ddzyc: "23",
      //     dyc: "21",
      //     qxc: "68",
      //     dc: "27",
      //     fgd: "83",
      //     tzd: "79",
      //     fdj: "48",
      //     fdc: "23",
      //     kg: "168",
      //     dx: "136",
      //     dg: "236",
      //     pb: "83"
      //   },
      //   {
      //     unit: "荆门",
      //     jg: "27",
      //     sd: "29",
      //     bd: "32",
      //     pd: "65",
      //     ddzyc: "22",
      //     dyc: "27",
      //     qxc: "52",
      //     dc: "22",
      //     fgd: "65",
      //     tzd: "83",
      //     fdj: "40",
      //     fdc: "22",
      //     kg: "123",
      //     dx: "134",
      //     dg: "221",
      //     pb: "65"
      //   },
      //   {
      //     unit: "黄冈",
      //     jg: "29",
      //     sd: "22",
      //     bd: "39",
      //     pd: "53",
      //     ddzyc: "24",
      //     dyc: "13",
      //     qxc: "68",
      //     dc: "10",
      //     fgd: "52",
      //     tzd: "79",
      //     fdj: "39",
      //     fdc: "24",
      //     kg: "165",
      //     dx: "79",
      //     dg: "228",
      //     pb: "76"
      //   },
      //   {
      //     unit: "鄂州",
      //     jg: "28",
      //     sd: "25",
      //     bd: "34",
      //     pd: "67",
      //     ddzyc: "18",
      //     dyc: "26",
      //     qxc: "50",
      //     dc: "12",
      //     fgd: "79",
      //     tzd: "85",
      //     fdj: "46",
      //     fdc: "28",
      //     kg: "198",
      //     dx: "123",
      //     dg: "178",
      //     pb: "79"
      //   },
      //   {
      //     unit: "咸宁",
      //     jg: "26",
      //     sd: "23",
      //     bd: "35",
      //     pd: "63",
      //     ddzyc: "27",
      //     dyc: "17",
      //     qxc: "66",
      //     dc: "12",
      //     fgd: "63",
      //     tzd: "79",
      //     fdj: "33",
      //     fdc: "27",
      //     kg: "123",
      //     dx: "124",
      //     dg: "223",
      //     pb: "76"
      //   },
      //   {
      //     unit: "十堰",
      //     jg: "24",
      //     sd: "25",
      //     bd: "33",
      //     pd: "62",
      //     ddzyc: "25",
      //     dyc: "21",
      //     qxc: "53",
      //     dc: "25",
      //     fgd: "79",
      //     tzd: "68",
      //     fdj: "54",
      //     fdc: "25",
      //     kg: "128",
      //     dx: "123",
      //     dg: "189",
      //     pb: "79"
      //   },
      //   {
      //     unit: "随州",
      //     jg: "23",
      //     sd: "23",
      //     bd: "39",
      //     pd: "69",
      //     ddzyc: "24",
      //     dyc: "26",
      //     qxc: "53",
      //     dc: "22",
      //     fgd: "76",
      //     tzd: "65",
      //     fdj: "56",
      //     fdc: "24",
      //     kg: "136",
      //     dx: "198",
      //     dg: "198",
      //     pb: "76"
      //   },
      //   {
      //     unit: "恩施",
      //     jg: "28",
      //     sd: "26",
      //     bd: "38",
      //     pd: "52",
      //     ddzyc: "19",
      //     dyc: "12",
      //     qxc: "65",
      //     dc: "13",
      //     fgd: "54",
      //     tzd: "76",
      //     fdj: "32",
      //     fdc: "25",
      //     kg: "134",
      //     dx: "65",
      //     dg: "136",
      //     pb: "79"
      //   },
      //   {
      //     unit: "神农架",
      //     jg: "15",
      //     sd: "16",
      //     bd: "22",
      //     pd: "43",
      //     ddzyc: "22",
      //     dyc: "10",
      //     qxc: "58",
      //     dc: "10",
      //     fgd: "39",
      //     tzd: "55",
      //     fdj: "36",
      //     fdc: "22",
      //     kg: "124",
      //     dx: "76",
      //     dg: "136",
      //     pb: "79"
      //   },
      //   {
      //     unit: "超高压",
      //     jg: "17",
      //     sd: "13",
      //     bd: "25",
      //     pd: "41",
      //     ddzyc: "25",
      //     dyc: "10",
      //     qxc: "69",
      //     dc: "12",
      //     fgd: "31",
      //     tzd: "52",
      //     fdj: "36",
      //     fdc: "25",
      //     kg: "65",
      //     dx: "79",
      //     dg: "198",
      //     pb: "55"
      //   },
      //   {
      //     unit: "省直流",
      //     jg: "14",
      //     sd: "16",
      //     bd: "26",
      //     pd: "40",
      //     ddzyc: "16",
      //     dyc: "6",
      //     qxc: "62",
      //     dc: "13",
      //     fgd: "28",
      //     tzd: "35",
      //     fdj: "27",
      //     fdc: "16",
      //     kg: "67",
      //     dx: "81",
      //     dg: "187",
      //     pb: "45"
      //   },
      //   {
      //     unit: "送变电",
      //     jg: "12",
      //     sd: "11",
      //     bd: "28",
      //     pd: "42",
      //     ddzyc: "12",
      //     dyc: "5",
      //     qxc: "69",
      //     dc: "3",
      //     fgd: "27",
      //     tzd: "33",
      //     fdj: "13",
      //     fdc: "12",
      //     kg: "83",
      //     dx: "79",
      //     dg: "156",
      //     pb: "43"
      //   },
      //   {
      //     unit: "黄龙滩",
      //     jg: "41",
      //     sd: "32",
      //     bd: "14",
      //     pd: "51",
      //     ddzyc: "19",
      //     dyc: "24",
      //     qxc: "23",
      //     dc: "22",
      //     fgd: "27",
      //     tzd: "39",
      //     fdj: "67",
      //     fdc: "56",
      //     kg: "93",
      //     dx: "47",
      //     dg: "112",
      //     pb: "40"
      //   }
      // ],
      tableDatas: [],
      dataS: [],
      total: 0,
      dataS1: [],
      total1: 0,
      dataS2: [],
      total2: 0,
      dataS3: [],
      total3: 0
    };
  },
  mounted() {
    this.getReserveTopPies();
    this.gettableDatas();
  },
  methods: {
    async getReserveTopPies() {
      const res = await getReserveTopPie();
      this.dataS = this.ReplacementData(res.team);
      this.dataS1 = this.ReplacementData(res.vehicle);
      this.dataS2 = this.ReplacementData(res.equip);
      this.dataS3 = this.ReplacementData(res.supplies);
      res.team.forEach((i) => {
        this.total += i.unassigned;
      });
      res.vehicle.forEach((i) => {
        this.total1 += i.unassigned;
      });
      res.equip.forEach((i) => {
        this.total2 += i.unassigned;
      });
      res.supplies.forEach((i) => {
        this.total3 += i.unassigned;
      });
      this.optionData[0] = this.dataS.map(el => {
        return [el.name, el.y];
      });
      this.optionData[1] = this.dataS1.map(el => {
        return [el.name, el.y];
      });
      this.optionData[2] = this.dataS2.map(el => {
        return [el.name, el.y];
      });
      this.optionData[3] = this.dataS3.map(el => {
        return [el.name, el.y];
      });
      this.isShowcharts1 = true;
      this.TeamBarCharts(); // 队伍初始化渲染echart图标
      this.CarBarCharts(); // 车辆初始化渲染echart图标
      this.EquipBarCharts(); // 装备初始化渲染echart图标
      this.SuppliesBarCharts(); // 物资初始化渲染echart图标
    },
    async gettableDatas() {
      const res = await allocationHome();
      if (res) {
        this.tableDatas = res;
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    ReplacementData(data) {
      const colorArr = ["#4FD2FD", "#FFBC4B", "#5EE855", "#EEEA71"];
      return data.map((i, s) => {
        return {
          name: i.typeName,
          y: i.unassigned,
          color: colorArr[s]
        };
      });
    },
    // header 颜色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0 && columnIndex === 0) {
        return "background-color: rgba(32,87,230,0.6);color:#fff;font-size:18px;";
      } else if (rowIndex === 0 && columnIndex === 1) {
        return "background-color: rgba(31,85,228,0.6);color:#fff;font-size:18px";
      } else if (rowIndex === 0 && columnIndex === 2) {
        return "background-color: rgba(42,96,234,0.6);color:#fff;font-size:18px";
      } else if (rowIndex === 0 && columnIndex === 3) {
        return "background-color: rgba(63,113,242,0.6);color:#fff;font-size:18px";
      } else if (rowIndex === 0 && columnIndex === 4) {
        return "background-color: rgba(88,128,233,0.6);color:#fff;font-size:18px";
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "background-row";
      } else {
        return "";
      }
    },
    TeamBarCharts() {
      this.$Highcharts.chart("TeamBar", {
        chart: {
          type: "pie",
          backgroundColor: "rgba(0,0,0,0)",
          marginLeft: 10,
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
          }
        },
        subtitle: {
          floating: true,
          text: `<span style="font-size: 20px;font-weight:bold;color:#fff">${this.total}</span><br/><span style="font-size: 16px;color:#fff">队伍可调配总数</span>`,
          x: 0,
          y: 100
        },
        credits: {
          enabled: false
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,24,34,0.25)",
          borderWidth: 0,
          shadow: false,
          textStyle: {
            color: "#fff"
          },
          shared: true,
          formatter() {
            return `<div><span style="font-size: 14px;color:#fff">${this.point.name}:</span><span style="color:#fff;font-size: 14px" >${this.point.y}</span></div>`;
          }
        },
        legend: {
          width: 280,
          icon: "rect",
          verticalAlign: "bottom",
          symbolWidth: 12,
          symbolHeight: 12,
          symbolRadius: 4,
          x: 40,
          y: 10,
          layout: "horizontal",
          align: "center",
          itemMarginTop: 3,
          itemStyle: {
            fontSize: "14px",
            color: "#fff"
          },
          itemHoverStyle: {
            color: "#fff"
          },
          labelFormatter: function () {
            return `<span style="margin:0 10px">${this.name}    </span><span style="color:${this.color};">${this.y}</span>`;
          }
        },
        plotOptions: {
          pie: {
            allowPointSelect: false,
            cursor: "pointer",
            size: 200,
            depth: 50,
            innerSize: 200,
            distance: "10%",
            dataLabels: {
              enabled: false,
              formatter() {
                return `${this.point.y}<br/><span>${this.point.name}</span>`;
              }
            },
            showInLegend: true,
            states: {
              inactive: {
                opacity: 1
              }
            }
          }
        },
        series: [{
          type: "pie",
          innerSize: "70%",
          states: {
            inactive: {
              enabled: true
            }
          },
          data: this.dataS
        }]
      });
    },
    CarBarCharts() {
      this.$Highcharts.chart("CarBar", {
        chart: {
          type: "pie",
          backgroundColor: "rgba(0,0,0,0)",
          marginLeft: 10,
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
          }
        },
        subtitle: {
          floating: true,
          text: `<span style="font-size: 20px;font-weight:bold;color:#fff">${this.total1}</span><br/><span style="font-size: 16px;color:#fff">车辆可调配总数</span>`,
          x: 0,
          y: 100
        },
        credits: {
          enabled: false
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,24,34,0.25)",
          borderWidth: 0,
          shadow: false,
          textStyle: {
            color: "#fff"
          },
          shared: true,
          formatter() {
            return `<div><span style="font-size: 14px;color:#fff">${this.point.name}:</span><span style="color:#fff;font-size: 14px" >${this.point.y}</span></div>`;
          }
        },
        legend: {
          width: 300,
          icon: "rect",
          verticalAlign: "bottom",
          symbolWidth: 12,
          symbolHeight: 12,
          symbolRadius: 4,
          x: 25,
          y: 10,
          layout: "horizontal",
          align: "center",
          itemMarginTop: 3,
          itemStyle: {
            fontSize: "14px",
            color: "#fff"
          },
          itemHoverStyle: {
            color: "#fff"
          },
          labelFormatter: function () {
            return `<span style="margin:0 10px">${this.name}    </span><span style="color:${this.color};">${this.y}</span>`;
          }
        },
        plotOptions: {
          pie: {
            allowPointSelect: false,
            cursor: "pointer",
            size: 200,
            depth: 50,
            innerSize: 200,
            distance: "10%",
            dataLabels: {
              enabled: false,
              formatter() {
                return `${this.point.y}<br/><span>${this.point.name}</span>`;
              }
            },
            showInLegend: true,
            states: {
              inactive: {
                opacity: 1
              }
            }
          }
        },
        series: [{
          type: "pie",
          innerSize: "70%",
          states: {
            inactive: {
              enabled: true
            }
          },
          data: this.dataS1
        }]
      });
    },
    EquipBarCharts() {
      this.$Highcharts.chart("EquipBar", {
        chart: {
          type: "pie",
          backgroundColor: "rgba(0,0,0,0)",
          marginLeft: 10,
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
          }
        },
        subtitle: {
          floating: true,
          text: `<span style="font-size: 20px;font-weight:bold;color:#fff">${this.total2}</span><br/><span style="font-size: 16px;color:#fff">装备可调配总数</span>`,
          x: 0,
          y: 100
        },
        credits: {
          enabled: false
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,24,34,0.25)",
          borderWidth: 0,
          shadow: false,
          textStyle: {
            color: "#fff"
          },
          shared: true,
          formatter() {
            return `<div><span style="font-size: 14px;color:#fff">${this.point.name}:</span><span style="color:#fff;font-size: 14px" >${this.point.y}</span></div>`;
          }
        },
        legend: {
          width: 300,
          icon: "rect",
          verticalAlign: "bottom",
          symbolWidth: 12,
          symbolHeight: 12,
          symbolRadius: 4,
          x: 40,
          y: 10,
          layout: "horizontal",
          align: "center",
          itemMarginTop: 3,
          itemStyle: {
            fontSize: "14px",
            color: "#fff"
          },
          itemHoverStyle: {
            color: "#fff"
          },
          labelFormatter: function () {
            return `<span style="margin:0 10px">${this.name}    </span><span style="color:${this.color};">${this.y}</span>`;
          }
        },
        plotOptions: {
          pie: {
            allowPointSelect: false,
            cursor: "pointer",
            size: 200,
            depth: 50,
            innerSize: 200,
            distance: "10%",
            dataLabels: {
              enabled: false,
              formatter() {
                return `${this.point.y}<br/><span>${this.point.name}</span>`;
              }
            },
            showInLegend: true,
            states: {
              inactive: {
                opacity: 1
              }
            }
          }
        },
        series: [{
          type: "pie",
          innerSize: "70%",
          states: {
            inactive: {
              enabled: true
            }
          },
          data: this.dataS2
        }]
      });
    },
    SuppliesBarCharts() {
      this.$Highcharts.chart("SuppliesBar", {
        chart: {
          type: "pie",
          backgroundColor: "rgba(0,0,0,0)",
          marginLeft: 10,
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
          }
        },
        subtitle: {
          floating: true,
          text: `<span style="font-size: 20px;font-weight:bold;color:#fff">${this.total3}</span><br/><span style="font-size: 16px;color:#fff">物资可调配总数</span>`,
          x: 0,
          y: 100
        },
        credits: {
          enabled: false
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,24,34,0.25)",
          borderWidth: 0,
          shadow: false,
          textStyle: {
            color: "#fff"
          },
          shared: true,
          formatter() {
            return `<div><span style="font-size: 14px;color:#fff">${this.point.name}:</span><span style="color:#fff;font-size: 14px" >${this.point.y}</span></div>`;
          }
        },
        legend: {
          width: 300,
          icon: "rect",
          verticalAlign: "bottom",
          symbolWidth: 12,
          symbolHeight: 12,
          symbolRadius: 4,
          x: 40,
          y: 10,
          layout: "horizontal",
          align: "center",
          itemMarginTop: 3,
          itemStyle: {
            fontSize: "14px",
            color: "#fff"
          },
          itemHoverStyle: {
            color: "#fff"
          },
          labelFormatter: function () {
            return `<span style="margin:0 10px">${this.name}    </span><span style="color:${this.color};">${this.y}</span>`;
          }
        },
        plotOptions: {
          pie: {
            allowPointSelect: false,
            cursor: "pointer",
            size: 200,
            depth: 50,
            innerSize: 200,
            distance: "10%",
            dataLabels: {
              enabled: false,
              formatter() {
                return `${this.point.y}<br/><span>${this.point.name}</span>`;
              }
            },
            showInLegend: true,
            states: {
              inactive: {
                opacity: 1
              }
            }

          }
        },
        series: [{
          type: "pie",
          innerSize: "70%",
          states: {
            inactive: {
              enabled: true
            }
          },
          data: this.dataS3
        }]
      });
    }
  }

};
</script>

<style lang="less" scoped>
.ResourceTable {
  width: 100%;
  height: 97.9vh;
  border-radius: 5px;
  .cardTitle {
    height: 30px;
  }
}
.cardTitle a {
  color: #fff;
  font-weight: 400;
  font-size: 16px;
}
.resourceBar {
  display: flex;
  position: relative;
  #TeamBar, #CarBar, #EquipBar, #SuppliesBar{
    position: relative;
  }
  .legend_pie {
    width: 100%;
    height: 20%;
    position: absolute;
    left: 20px;
    bottom: -30px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    .pie_bottom {
      display: inline-block;
      text-align: center;
      height: 16px;
      width: 20px;
      margin-right: 5px;
      border-radius: 3px;
    }
  }
}
:deep(.el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed) {
  border-right: none;
}
:deep(.el-table--border th.el-table__cell, .el-table__fixed-right-patch) {
  border-bottom: none;
}
:deep(.el-table td.el-table__cell) {
  border-bottom: none !important;
}
:deep(.el-table th.el-table__cell.is-leaf) {
  border-bottom: none !important;
}
:deep(.el-table--small .el-table__cell) {
  padding: 2.7px 0;
}
:deep(.el-table--border, .el-table--group) {
  border: none;
}
:deep(.el-table--border::after, .el-table--group::after) {
  width: 0;
}
:deep(.el-table::before) {
  height: 0;
}
:deep(.el-table tr) {
  font-family: "Avenir, Helvetica, Arial, sans-serif";
  background-color: transparent;
  color: #fff;
  font-weight: 400;
  font-size: 16px;
}
:deep(.el-table th.el-table__cell > .cell) {
  font-family: "Avenir, Helvetica, Arial, sans-serif";
  padding-left: 0;
  padding-right: 0;
}
:deep(.el-table thead.is-group th.el-table__cell) {
  background: transparent;
}
:deep(.el-table, .el-table__expanded-cell) {
  .background-row {
    background: rgba(104, 168, 244, 0.2);
  }
  background-color: transparent;
  .el-table__body-wrapper.is-scrolling-left {
    height: 482px;
  }
  .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background: rgba(104, 168, 244, 0.2);
  }
  .el-table td {
    border-bottom: none;
    color: #fff;
    font-size: 16px;
  }
  .el-table th {
    border-bottom: none !important;
  }
  .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background-color: transparent;
  }
  .el-table__body tr:hover > td {
    background-color: rgba(104, 168, 244, 0.2) !important;
  }
  .el-table__body tr.current-row > td {
    background-color: rgba(104, 168, 244, 0.2) !important;
  }
}
:deep(.el-table__footer-wrapper td.el-table__cell) {
  border-top: none;
}
:deep(.el-table__footer-wrapper tbody td.el-table__cell, .el-table__header-wrapper tbody td.el-table__cell) {
  background-color: rgba(104, 168, 244, 0.2);
  color: #fff;
}
:deep(div::-webkit-scrollbar-track) {
  border-radius: 0;
  background: transparent;
}
:deep(div::-webkit-scrollbar-thumb) {
  border-radius: 10px;
  box-shadow: none;
  background: rgba(215, 215, 215, 0.4);
}
:deep(div::-webkit-scrollbar) {
  width: 5px;
}
:deep(.el-table--border th.el-table__cell.gutter:last-of-type){
  border-bottom-width:0;
  background: transparent;
}
</style>
